<template>
    <div>
        <h1 class=" text-lg">🔍皮肤药</h1>
        <hr />
        <template v-if="drugInfoList.list.length <= 0">
            <el-empty description="没有符合的物品" />
        </template>
        <el-row v-else :gutter="10" class=" mt-4">
            <el-col v-for="(item, index) in drugInfoList.list" :key="item.id" :span="4">
                <el-card :body-style="{ padding: '5px' }" class="box-card">
                    <el-image :src="'api/uploads/drug/' + item.url" class="image">
                        <template #placeholder>
                            <div class="image-slot">Loading<span class="dot">...</span></div>
                        </template>
                    </el-image>
                    <div style="padding: 5px">
                                <div class="card-t"><span class="text-sm font-mono">{{ item.name }}</span></div>
                        <div class="bottom">
                            <time class="time">{{ item.approvalNo }}</time>
                            <el-link @click="handleDetail(item)" type="primary" class="text-sm"><span style="font-size: 10px; width: 50px;">详细信息</span></el-link>

                        </div>
                    </div>
                </el-card>
            </el-col>
        </el-row>
        <div class="demo-pagination-block mt-10">
            <el-pagination v-model:current-page="pageInfoData.currentPage" v-model:page-size="pageInfoData.pageSize"
                :page-sizes="[100, 200, 300, 400]" :small="small" :disabled="disabled" :background="background"
                layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange"
                @current-change="handleCurrentChange" />
        </div>
    </div>
</template>

<script setup>
import { getDrugList } from '../../../api/modules/druginfo'
import { ref, onMounted, reactive, watch } from "vue";
import { useStore } from "vuex";
import { useRoute, useRouter } from 'vue-router';
const route = useRoute()
const router = useRouter()
const store = useStore()
const drugInfoList = reactive({
    list: []
})
const pageInfoData = ref({
    currentPage: 1,
    pageSize: 100,
    type: 'pifu'
})
const total = ref()
const getDrugInfoList = async () => {
    let res = await getDrugList(pageInfoData.value)
    total.value = res.data.data.total
    drugInfoList.list = res.data.data.records
}
const handleDetail = (item) => {
    store.commit("drugs/setCurrentDrugInfo",item)
    store.commit("drugs/setCurrentPageInfo", pageInfoData)
    router.push('/detail')
}
onMounted(() => {
    getDrugInfoList()
})
const handleCurrentChange = (val) => {
    pageInfoData.value.currentPage = val
    getDrugInfoList()
}
const handleSizeChange = (val) => {
    pageInfoData.value.pageSize = val
    getDrugInfoList()
}
</script>

<style lang="scss" scoped>
@import '../card.scss';
</style>